<template>
	<view>
		<navbar :parameter='parameter'></navbar>
		<view class="details-box">
			<view class="back">
				<image src="/static/images/attendant-details.jpg" mode="widthFix"></image>
			</view>
			<view class="attendant ">
				<view class="acea-row">
					<view class="pic-box">
						<image :src="imageUrl+attendant.album_images"></image>
					</view>
					<view class="top-right">
						<view class="acea-row row-middle">
							<text class="name">{{attendant.name}}</text>
							<text class="title">{{attendant.background}}</text>
						</view>
					</view>
				</view>
				<view class="num-list acea-row row-between-wrapper">
					<view class="num-item">
						累计服务 <text>{{attendant.order_viture_num}}单</text>
					</view>
					<view class="num-item">
						综合评分 <text>{{attendant.comprehensive_score}}</text>
					</view>
					<view class="num-item">
						学历 <text>{{attendant.education}}</text>
					</view>
				</view>
				<view class="content-box">
					<view class="line">
						<text>简介</text>
						<rich-text :nodes="attendant.content"></rich-text>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 90rpx;"></view>
		<view @click="shenqing()" class="order-btn">立即申请</view>
		
		<u-toast ref="uToast"></u-toast>
		<login :isAuto="false" ref="mySon" @phone_show="phone_show" ></login>
		<phone :isShow="isShow2" @close="close2" @chamgs="chamgs2"></phone>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '临床试验专员详情',
					'color': true,
					'class': 'transparent'
				},
				imageUrl: this.imageUrl,
				attendant: {},
				id:'',
				
				isShow2: false,
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.info(option.id);
		},
		onShow() {

		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
		
		},
		onShareTimeline(res) { //分享到朋友圈
		
		},
		//监听屏幕滚动 判断上下滚动  
		onPageScroll: function(e) {
			if (e.scrollTop > 60) {
				this.parameter.class = 'on'
			} else {
				this.parameter.class = 'transparent'
			}

		},
		methods: {
			async info(id) {
				const res = await this.$myRequest({
					url: '/api/index/lcsyzy_detail',
					data: {
						openid: uni.getStorageSync('openid'),
						id: id,
					}
				})
				res.data.data.content = this.$richText(res.data.data.content);
				this.attendant = res.data.data;
			},
			phone_show(){
				this.isShow2 = true;
			},
			close2() {
				this.isShow2 = false
			},
			shenqing() {
				let openid = uni.getStorageSync('openid');
				if (openid) {
					uni.navigateTo({
						url:'/bundle/pages/clinical/apply?id='+this.id
					})
				} else {
					console.log('没有')
					// this.chamgs()
					this.$refs.mySon.login();
				}


			}
		}
	}
</script>

<style lang="scss" scoped>
	.details-box {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		padding-top: 340rpx;
	}

	.back {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
	}

	.back image {
		width: 100%;
	}

	.attendant {
		width: 100%;
		border-radius: 12rpx 12rpx 0 0;
		background-color: #F5F6F8;
		padding: 20rpx 30rpx;
		position: relative;
		z-index: 3;
	}

	.attendant .pic-box {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-top: -100rpx;
		background-color: #fff;
	}

	.attendant .pic-box image {
		width: 100%;
		height: 100%;
	}

	.attendant .top-right {
		padding-left: 30rpx;
		flex: 1;
	}

	.attendant .top-right .name {
		font-size: 33rpx;
		color: #000;
	}

	.attendant .top-right .title {
		height: 36rpx;
		background: #FE8802;
		border-radius: 6rpx;
		color: #fff;
		text-align: center;
		line-height: 36rpx;
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.attendant .top-right .tag {
		padding-top: 20rpx;
	}

	.attendant .top-right .tag text {
		width: 100rpx;
		height: 33rpx;
		background: rgba($color: #1A8DFE, $alpha: .1);
		color: #3893FF;
		font-size: 21rpx;
		border-radius: 6rpx;
		margin-right: 12rpx;
		text-align: center;
		line-height: 33rpx;
	}

	.attendant .num-list {
		padding: 30rpx 0;
	}

	.attendant .num-item {
		font-size: 26rpx;
		color: #000;
	}

	.attendant .num-item text {
		font-size: 33rpx;
		color: #347DFE;
		padding-left: 10rpx;
	}

	.attendant .content-box {
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
		border-radius: 12rpx;
	}

	.attendant .content-box .line {
		color: #666666;
		font-size: 24rpx;
		line-height: 1.6;
		margin-bottom: 20rpx;
	}

	.attendant .content-box .line text {
		display: inline-block;
		width: 55rpx;
		height: 30rpx;
		line-height: 30rpx;
		color: #fff;
		background: #1B82FF;
		font-size: 21rpx;
		border-radius: 4rpx;
		text-align: center;
		margin-right: 10rpx;
	}

	.order-btn {
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: 90rpx;
		background: #347DFE;
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		z-index:999;
	}
	
</style>
